import './App.scss';
import Input from './components/Input'
import Tabbar from './components/Tabbar'
//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件

import React, { Component } from 'react';

// 导入图片
import pic1 from './imgs/1.gif'
import pic2 from './imgs/2.gif'
import pic3 from './imgs/3.gif'
import pic4 from './imgs/4.gif'
import pic5 from './imgs/5.gif'
import pic6 from './imgs/6.gif'
import pic7 from './imgs/7.gif'
import pic8 from './imgs/8.gif'
import pic9 from './imgs/9.gif'
import pic10 from './imgs/10.gif'
import pic11 from './imgs/11.gif'
// 酒水
import picj1 from './imgs/1j.jpg'
import picj2 from './imgs/2j.jpg'
import picj3 from './imgs/3j.jpg'
import picj4 from './imgs/4j.jpg'
import picj5 from './imgs/5j.jpg'
import picj6 from './imgs/6j.jpg'
import picj7 from './imgs/7j.jpg'
import picj8 from './imgs/8j.jpg'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
      arr: [
        {
          title: '活动专区',
          list: [
            { name: '卸妆', pic: pic1 },
            { name: '洁面/去角质', pic: pic2 },
            { name: '爽肤水/喷露', pic: pic3 },
            { name: '乳液', pic: pic4 },
            { name: '精华/精油', pic: pic5 },
            { name: '面霜', pic: pic6 },
            { name: '面膜', pic: pic7 },
            { name: '防嗮隔离', pic: pic8 },
            { name: '润唇膏/唇膜', pic: pic9 },
            { name: '面部套装', pic: pic10 },
            { name: '其他面部', pic: pic11 },
          ]
        },
        {
          title: '品牌',
          list: [
            { name: '卸妆', pic: '' },
            { name: '洁面/去角质', pic: '' },
            { name: '爽肤水/喷露', pic: '' },
            { name: '乳液', pic: '' },
            { name: '精华/精油', pic: '' },
            { name: '面霜', pic: '' },
            { name: '面膜', pic: '' },
            { name: '防嗮隔离', pic: '' },
            { name: '润唇膏/唇膜', pic: '' },
            { name: '面部套装', pic: '' },
            { name: '其他面部', pic: '' },
          ]
        },
        {
          title: '美容护肤',
          list: [
            { name: '卸妆', pic: pic1 },
            { name: '洁面/去角质', pic: pic2 },
            { name: '爽肤水/喷露', pic: pic3 },
            { name: '乳液', pic: pic4 },
            { name: '精华/精油', pic: pic5 },
            { name: '面霜', pic: pic6 },
            { name: '面膜', pic: pic7 },
            { name: '防嗮隔离', pic: pic8 },
            { name: '润唇膏/唇膜', pic: pic9 },
            { name: '面部套装', pic: pic10 },
            { name: '其他面部', pic: pic11 },
          ]
        },
        {
          title: '彩妆',
          list: [
            { name: '卸妆', pic: '' },
            { name: '洁面/去角质', pic: '' },
            { name: '爽肤水/喷露', pic: '' },
            { name: '乳液', pic: '' },
            { name: '精华/精油', pic: '' },
            { name: '面霜', pic: '' },
            { name: '面膜', pic: '' },
            { name: '防嗮隔离', pic: '' },
            { name: '润唇膏/唇膜', pic: '' },
            { name: '面部套装', pic: '' },
            { name: '其他面部', pic: '' },
          ]
        },
        {
          title: '香水',
          list: [
            { name: '卸妆', pic: '' },
            { name: '洁面/去角质', pic: '' },
            { name: '爽肤水/喷露', pic: '' },
            { name: '乳液', pic: '' },
            { name: '精华/精油', pic: '' },
            { name: '面霜', pic: '' },
            { name: '面膜', pic: '' },
            { name: '防嗮隔离', pic: '' },
            { name: '润唇膏/唇膜', pic: '' },
            { name: '面部套装', pic: '' },
            { name: '其他面部', pic: '' },
          ]
        },
        {
          title: '酒类',
          list: [
            { name: '斯佩赛', pic: picj1 },
            { name: '高地', pic: picj2 },
            { name: '艾雷岛', pic: picj3 },
            { name: '岛屿区', pic: picj4 },
            { name: '白葡萄酒', pic: picj5 },
            { name: 'OB单桶', pic: picj6 },
            { name: '台湾威士忌', pic: picj7 },
            { name: '日本威士忌', pic: picj8 },

          ]
        },
        {
          title: '腕表首饰',
          list: [
            { name: '卸妆', pic: '' },
            { name: '洁面/去角质', pic: '' },
            { name: '爽肤水/喷露', pic: '' },
            { name: '乳液', pic: '' },
            { name: '精华/精油', pic: '' },
            { name: '面霜', pic: '' },
            { name: '面膜', pic: '' },
            { name: '防嗮隔离', pic: '' },
            { name: '润唇膏/唇膜', pic: '' },
            { name: '面部套装', pic: '' },
            { name: '其他面部', pic: '' },
          ]
        },
        {
          title: '服饰箱包',
          list: [
            { name: '卸妆', pic: '' },
            { name: '洁面/去角质', pic: '' },
            { name: '爽肤水/喷露', pic: '' },
            { name: '乳液', pic: '' },
            { name: '精华/精油', pic: '' },
            { name: '面霜', pic: '' },
            { name: '面膜', pic: '' },
            { name: '防嗮隔离', pic: '' },
            { name: '润唇膏/唇膜', pic: '' },
            { name: '面部套装', pic: '' },
            { name: '其他面部', pic: '' },
          ]
        },
        {
          title: '食品保健',
          list: [
            { name: '卸妆', pic: '' },
            { name: '洁面/去角质', pic: '' },
            { name: '爽肤水/喷露', pic: '' },
            { name: '乳液', pic: '' },
            { name: '精华/精油', pic: '' },
            { name: '面霜', pic: '' },
            { name: '面膜', pic: '' },
            { name: '防嗮隔离', pic: '' },
            { name: '润唇膏/唇膜', pic: '' },
            { name: '面部套装', pic: '' },
            { name: '其他面部', pic: '' },
          ]
        },
      ]
    }
  }

  // 定义方法，点击高亮和切换界面
  handleClick(index) {
    this.setState({
      currentIndex: index
    })
  }

  render() { //渲染组件模板到视图
    return (
      <div className='app'>
        {/* 导入搜索组件 */}
        <Input></Input>
        {/* 商品列表 */}
        <div className="list">
          {/* 侧边导航栏 */}
          <div className="left">
            {
              this.state.arr.map((item, index) => {
                return (
                  <div className={"btn " + (this.state.currentIndex == index ? 'activen' : '')} key={index} onClick={() => {
                    this.handleClick(index);
                  }}>
                    <span className={this.state.currentIndex == index ? 'active' : ''}>{item.title}</span>
                  </div>
                )
              })
            }
          </div>
          {/* 右边商品列表 */}
          <div className="right">
            {
              this.state.arr[this.state.currentIndex].list.map((item, index) => {
                return (
                  <div className="shop_list" key={index}>
                    <img src={item.pic} alt="" />
                    <div className="name">{item.name}</div>
                  </div>
                )
              })
            }
          </div>
        </div>
        {/* 底部导航栏 */}
        <Tabbar></Tabbar>
      </div>
    );
  }
}

export default App;